<template>
  <c-card>
    <div class="images-temp">
      <p>手机壁纸</p>
      <section
        style="
          width: 100%;
          height: auto;
          padding: 0;
          box-sizing: border-box;
          display: flex;
          align-items: center;
        "
      >
        <section style="width: 100%; height: auto; padding: 6px; box-sizing: border-box">
          <img
            class="raw-image"
            :src="imgList[0]"
            style="
              width: 100%;
              line-height: 0;
              aspect-ratio: 9/16;
              object-fit: cover;
              box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
              border-radius: 12px;
              overflow: hidden;
            "
          />
        </section>
        <section style="width: 100%; height: auto; padding: 6px; box-sizing: border-box">
          <img
            class="raw-image"
            :src="imgList[0]"
            style="
              width: 100%;
              line-height: 0;
              aspect-ratio: 9/16;
              object-fit: cover;
              box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
              border-radius: 12px;
              overflow: hidden;
            "
          />
        </section>
      </section>

      <p>电脑壁纸</p>
      <section
        style="
          width: 100%;
          height: auto;
          padding: 6px 0;
          box-sizing: border-box;
          display: flex;
          align-items: center;
        "
      >
        <section style="width: 100%; height: auto; padding: 0 6px; box-sizing: border-box">
          <img
            class="raw-image"
            :src="imgList[0]"
            style="
              width: 100%;
              line-height: 0;
              aspect-ratio: 16/9;
              object-fit: cover;
              box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
              border-radius: 12px;
              overflow: hidden;
            "
          />
        </section>

        <section style="width: 100%; height: auto; padding: 0 6px; box-sizing: border-box">
          <img
            class="raw-image"
            :src="imgList[0]"
            style="
              width: 100%;
              line-height: 0;
              aspect-ratio: 16/9;
              object-fit: cover;
              box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
              border-radius: 12px;
              overflow: hidden;
            "
          />
        </section>
      </section>

      <p>九宫格</p>
      
    </div>
  </c-card>
</template>

<script setup name="el-encap.table-template">
import { ref, computed, onMounted } from 'vue';

// hooks
import { useTable } from '@/hooks/useTable/index.js';
import { useFetch } from '@/hooks/useFetch/index.js';

// components
import { MessageBox } from '@/utils/message-box';
import { ElMessage } from 'element-plus';

// router
import { useRouter } from 'vue-router';
const router = useRouter();

// store modal
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

// user
import { useUserStore } from '@/pinia/modules/user.js';
const userStore = useUserStore();

import dayjs from 'dayjs';

const imgList = [
  'https://www.luckch.cn/images-upload/phone-wallpaper/202506/20250627222505_596.jpg',
];

onMounted(() => {});
</script>

<style lang="scss" scoped>
.images-temp {
}
</style>
